<template>
	<div id="ranking">
		<div class="wrap">
			<ul>
				<li class="clearfix" v-for="(item,index) in topList" @click="goToList(item.id)" :key="index">
					<div class="img fl">
						<img :src="item.picUrl" />
						<span class="accessnum">
							<i class="iconfont icon-headseterji"></i>
							{{accessnum(item.listenCount)}}万
						</span>
					</div>
					<div class="info fl">
						<p class="title textOverflow">{{item.topTitle}}</p>
						<p class="songs textOverflow" v-for="(songs,index) in item.songList" :key="index">
							{{index+1}}
							<span>{{songs.songname}}</span> -
							<span>{{songs.singername}}</span>
						</p>
					</div>
				</li>
			</ul>
			<p class="more">去客户端发现更多好音乐 > </p>
		</div>
	</div>
</template>

<script>
	import api from "../js/musicAPI.js";

	export default {
		data: function() {
			return {
				topList: "",
			}
		},
		created: function() {
			api.getTopList().then((res) => {
				console.log(res.data);
				this.topList = res.data.topList;
			});
		},
		methods: {
			//地址传参
			goToList: function(id) {
				this.$router.push({
					path: "/list",
					query: {
						mid: id,
						type:"topsong"
					}
				});
			},
			//播放量保留一位小数，以万为单位
			accessnum: function(num) {
				var n = num / 10000;
				return n.toFixed(1);
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import "../scss/ranking";
</style>